<template>
	<div class="groupVoucher">
		<x-header title="我的免单券" :left-options="{backText:''}" class="whiteHeader"></x-header>
		<scroller :on-infinite="infinites" ref='myScroller'>
			<div class="allGroup">
				<div class="commentList groupList" :class='{timeout:item.EXP_DATE<new Date().getTime(),useGroup:item.STATUS==2}' v-for='(item,index) in allGroupVoucher' :key="index" @click='goFreeGroup(item)'>
					<div class="groupAmount"></div>
					<div class="voucherMess">
						<h1>{{item.SUBJECT}}</h1>
						<p>有效期至:{{item.EXP_DATE | filterTimes}}</p>
						<p>{{item.CASH_VOL_RMK}}</p>
					</div>
				</div>
				<div class="noMoreDate"  v-if='noData'>
            <div class="noMoreLine"></div>
            <span>没有更多券了哟 ~</span>
        </div>
			</div>
		</scroller>
		<div class="noGroupVoucher" v-if='noGroupVouchers'>
			<img src="../../assets/image/ticket/noData.png" alt="" />
			<p>暂无免单券</p>
			<a href="http://carnt.carnettong.com:8088/CARNT/GroupPlayDetail/oneGroupRule.html">如何获得团长免单券机会？</a>
			<div class="goGroup" @click='goGroup'>快去拼团吧</div>
		</div>
	</div>
</template>
<script>
/*智能保养*/
import { XHeader } from 'vux';
import { setCookie, getCookie } from '../../util/commonUtils';
export default {
	name: "groupVoucher",
	// 数据
	data() {

		return {
			userId: '',
			page:1,
			allGroupVoucher:[],
			canQuestion:false,
			noData:false, //判断代金券是否加载完成
      noGroupVouchers:false  //没有代金券
		}
	},
	// 计算属性
	computed: {

	},
	// 创建（实例创建完成）
	created() {
		this.userId = getCookie('loginkey');
	},
	// el被创建，并挂载到实例上
	mounted() {

	},
	// 方法（实例中的方法）-----------
	methods: {
		//获取用户所有的代金券
        getUserAllGroupVoucher(){
        	if(this.canQuestion){
        		return;
        	}
        	this.canQuestion=true;
            this.$fetchPost('/CashVolumeWeb/getUserGrouponCashvolByCategory.action',{
              USER_ID:this.userId,
              TYPE:2,
              PAGE_NO:this.page
            }).then(res=>{
              if(res.STATUS_CODE==1){
                this.allGroupVoucher=this.allGroupVoucher.concat(res.CASH_VOL_LIST);
                if(res.CASH_VOL_LIST.length<10){
                	this.$refs.myScroller.finishInfinite(2);
                	if(this.allGroupVoucher.length==0){
                    this.noGroupVouchers=true;
                	}else{
                		this.noData=true;
                	}
                }else{
                	this.page++;
                	this.$refs.myScroller.finishInfinite();
                	this.canQuestion=false;
                }
              }
            },err=>{
              console.log(err);
            })
        },
        infinites(){
        	this.getUserAllGroupVoucher();
        },
        goFreeGroup(item){
			if(item.EXP_DATE<new Date().getTime()||item.STATUS==2){
				return;
			}else{
				this.$router.push('/freeGroup');
			}
        	
        },
        goGroup(){
        	this.$router.push('/oneGroup');
        }
	},
	// 子组件
	components: {
		XHeader
	}
}
</script>
<!--当前页面的样式 -->
<style lang="less" scoped>
@import url('../../assets/css/public.less');
.groupVoucher {
	min-height: 100%;
   	height: 100%;
   	.noGroupVoucher{
   		position: absolute;
   		top: 50%;
   		left:50%;
   		transform:translate(-50%,-50%);
   		img{
   			width: 1.63rem;
   			height:1.54rem;
   			display: block;
   			margin: 0 auto;
   		}
   		p{
   			font-size:0.28rem;
			color:#999;
			margin: 0.25rem 0 0.15rem;
   		}
   		a{
   			font-size: 0.3rem;
   			color: #FA4040;
        display: block;
   			margin-bottom: 0.15rem;
   		}
   		.goGroup{
   			width: 2.6rem;
   			height: 0.66rem;
   			background:#F22E2E;
   			border-radius: 0.35rem;
   			font-size: 0.28rem;
   			color: #fff;
   			line-height: 0.66rem;
   			text-align: center;
   			margin: 0 auto;
   		}
   	}
	.noMoreDate{
	    position: relative;
	    height: 0.6rem;
	    margin-bottom:-1rem;
	    z-index: 999;
	    padding-top: 0.5rem;
	    .noMoreLine{
	      width: 2.9rem;
	      margin: 0 auto;
	      height: 0.02rem;
	      background: #777;
	      transform:scaleY(0.5);
	    }
	    span{
	      font-size: 0.22rem;
	      color: #666;
	      padding: 0 0.1rem;
	      position: absolute;
	      background: #efeff4;
	      transform:translate(-50%,-50%);
	    }
	    .noMoreList{
	      background: #fff!important;
	    }
	}
   .allGroup{
   	    background: #efeff4;
   	    padding:0.88rem 0 0.3rem 0;
   	   .commentList{
   	  	width: 6.96rem;
   	  	height: 1.86rem;
   	  	margin: 0.21rem auto 0;
   	  	display: flex;
   	  	align-items:center;
   	  	.groupAmount{
   	  		width: 0.85rem;
   	  		height: 0.79rem;
   	  		margin: 0 0 0 1.3rem;
   	  	}
   	  	.voucherMess{
   	  		padding-left: 0.5rem;
   	  		text-align: left;
   	  		h1{
   	  			font-size: 0.32rem;
   	  			margin-bottom: 0.05rem;
   	  		}
   	  		p{
   	  			font-size: 0.22rem;
   	  		}
   	  		p:last-child{
   	  			font-size: 0.26rem;
   	  			margin-top: 0.35rem;
   	  		}
   	  	}
   	  }
   	  .groupList{
   	  	background:url('../../assets/image/ticket/groupTicket1.png') no-repeat;
   	  	background-size: 6.96rem 1.86rem;
   	  	.groupAmount{
   	  		background: url(../../assets/image/ticket/freeRed.png) no-repeat;
   	  		background-size: 0.85rem 0.79rem;
   	  	}
   	  	.voucherMess{
   	  		h1{
   	  			color: #F874A0;
   	  		}
   	  		p{
   	  			color: #F874A0;
   	  		}
   	  		p:last-child{
   	  			color: #F874A0;
   	  		}
   	  	}
   	  }
   	  .useGroup{
   	  	background:url('../../assets/image/ticket/used3.png') no-repeat;
   	  	background-size: 6.96rem 1.86rem;
   	  	.groupAmount{
   	  		background: url(../../assets/image/ticket/noUse.png) no-repeat;
   	  		background-size: 0.85rem 0.79rem;
   	  	}
   	  	.voucherMess{
   	  		h1{
   	  			color: #BBBBBB;
   	  		}
   	  		p{
   	  			color: #BBBBBB;
   	  		}
   	  		p:last-child{
   	  			color: #BBBBBB;
   	  		}
   	  	}
   	  }
   	  .timeout{
   	  	background:url('../../assets/image/ticket/dated1.png') no-repeat;
   	  	background-size: 6.96rem 1.86rem;
   	  	.groupAmount{
   	  		background: url(../../assets/image/ticket/noUse.png) no-repeat;
   	  		background-size: 0.85rem 0.79rem;
   	  	}
   	  	.voucherMess{
   	  		h1{
   	  			color: #BBBBBB;
   	  		}
   	  		p{
   	  			color: #BBBBBB;
			}
			p:last-child{
   	  			color: #BBBBBB;
   	  		}
   	  	}
   	  }
   } 
}
</style>